import React, { useEffect } from 'react';

interface Props {
  title?: string;
  imgPath: string;
  onClose: () => void;
}

export default function ViewPictureDialog({ title = '查看图片', imgPath, onClose }: Props) {
  useEffect(() => {
    window.document.body.style.overflow = 'hidden';
  }, []);

  function handleClose() {
    window.document.body.style.overflow = '';
    onClose();
  }
  return (
    <div className="picture-dialog">
      <div className="picture-mask" onClick={handleClose} />
      <div className="picture-center" onClick={() => {}}>
        <div className="picture-title-block">
          <div className="picture-title">{title}</div>
          <div className="picture-close" onClick={handleClose}>
            <img alt="" className="close-icon" src={closeIcon} />
          </div>
        </div>
        <div className="picture-content">
          <img src={imgPath} alt="" />
        </div>
      </div>
    </div>
  );
}

let closeIcon =
  '';
